<template>
	<view>
		<!-- 商品信息 -->
		<view class="box-color box-padding u-flex u-m-b-20">
			<view style="font-size: 0;">
				<image :src="resourcesUrl + info.resourceId" style="width: 120rpx;height: 120rpx;border-radius: 10rpx;" mode=""></image>
			</view>
			<view class="u-m-l-20 u-flex-col u-row-around" style="height: 120rpx;flex: 1;">
				<text class="u-font-30">{{ info.itemName }}</text>
				<view class="u-flex u-row-between">
					<view class="grey-box u-m-r-20">
						{{ info.specification }}
					</view>
					<view>
						<number-box width="160rpx" height="50rpx" fontSize="28rpx" :value="info.quantity" :max="Number(maxQuantity)" @change="updateQuantity($event)"></number-box>
					</view>
				</view>
			</view>
		</view>
		<!-- 退款信息 -->
		<u-cell-group class="u-m-b-20">
			<u-cell-item title="退款信息" :arrow="false" :border-bottom="false" :title-style="titleStyle" hover-class="none" style="height: 90rpx"></u-cell-item>
			<u-cell-item :value="resonValue" @click="resonShow = true">
				<view slot="title">
					退货原因<text style="color:#C30D23;">*</text>
				</view>
			</u-cell-item>
			<u-cell-item :arrow="false" :border-bottom="false">
				<view class="u-flex u-row-between">
					<text>退款金额<text style="color:#C30D23;">*</text></text>
					<text style="font-size: 40rpx;" class="badge-color">{{ amount }}</text>
				</view>
				<view style="float: left;">
					<text class="u-font-26 grey-color">可修改，最多￥{{ maxAmount }}，请与卖家协商</text>
				</view>
			</u-cell-item>
		</u-cell-group>
		<!-- 补充凭证和描述 -->
		<view class="box-color box-padding">
			<text class="u-font-32 text-bold">补充描述和凭证<text style="color:#C30D23;">*</text></text>
			<textarea v-model="comments" style="width: 100%;margin-top: 60rpx;height: 170rpx;"
				placeholder-style="font-size:30rpx;color: #CCCCCC;" placeholder="补充描述，有助于更好的处理售后问题" />
			<u-upload
				ref="invoiceUploadRef"
				:action="baseUrl + 'api/Resource/UploadToOss'"
				:file-list="fileList"
				:header="headerToken"
				name="image"
				:custom-btn="true"
				:deletable="true"
				:show-progress="false"
				@on-success="onSuccess"
				width="140"
				height="140"
			>
			<view slot="addBtn" style="width: 140rpx;height: 140rpx;border-radius: 10rpx; background-color: #F8F8F8;display: flex;flex-direction: column;align-items: center;justify-content: center;">
					<u-icon name="plus" size="30" color="#CACACA" class="u-m-b-10"></u-icon>
					<text class="u-font-22 grey-color">上传凭证</text>
			</view>
			</u-upload>
		</view>
		<!-- 提交 -->
		<view style="margin-top: 100rpx;padding-left: 35rpx;padding-right: 35rpx;padding-bottom: 100rpx;">
			<u-button shape="circle" :hair-line="false" hover-class="none" :ripple="true" :custom-style="getBtStyle('default')" @click="handleSubmit">提交</u-button>
		</view>
		<!-- 退款原因 -->
		<u-action-sheet :list="resonList" v-model="resonShow" @click="resonClick"></u-action-sheet>
	</view>
</template>

<script>
	import NumberBox from '@/components/number-box/index.vue'
	import { useUserStore } from '@/store/user.js';
	import { mapState } from 'pinia';
	export default {
		components: { NumberBox },
		data() {
			return {
				titleStyle: {
					fontSize: '32rpx',
					fontWeight: 'bold',
					color: this.textColor
				},
				fileList: [],
				annex: [],
				resonValue: '请选择',
				resonShow: false,
				resonList: [
					{ id: 1, text: '卖家发错货' },
					{ id: 2, text: '其他' },
				],
				returnReason: null,
				maxQuantity: 0,
				maxAmount: 0,
				amount: 0,
				info: {},
				comments: '',
				rules: [
					{ field: 'returnReason', message: '请选择退货原因' },
					{ field: 'comments', message: '请填写补充描述' },
					{ field: 'annex', message: '请上传凭证' },
				]
			}
		},
		onLoad(option) {
			this.info = option
			console.log(this.info)
			this.maxQuantity = this.info.quantity
			// 查询商品实付价格
			this.getActuallyPrice()
		},
		computed:{
			...mapState(useUserStore, ['headerToken'])
		},
		methods: {
			async getActuallyPrice() {
				const res = await this.$http.get('api/AfterSale/GetActuallyPrice', { params: { tradeOrderItemId: this.info.id } })
				this.price = res
				this.amount = this.price * this.info.quantity
				this.maxAmount = this.amount
			},
			// 图片上传成功触发
			onSuccess(data) {
				this.annex.push(data.data[0].id)
			},
			goodsClick(index) {
				this.goodsValue = this.goodsList[index].text
			},
			resonClick(index) {
				this.resonValue = this.resonList[index].text
				this.returnReason = this.resonList[index].id
			},
			updateQuantity(v) {
				this.amount = this.price * v
				this.info.quantity = v
			},
			async handleSubmit() {
				const flag = this.showMessage()
				if (!flag) return
				const data = {
					type: 2, // 退货
					quantity: this.info.quantity,
					returnReason: this.returnReason,
					comments: this.comments,
					annex: this.annex,
					tradeId: this.info.tradeId,
					tradeOrderItemId: this.info.id
				}
				// console.log(data)
				const res = await this.$http.post('api/AfterSale/ApplyForReturnRefund', data)
				this.$u.toast('提交成功', 1000, 'success')
				this.$mHelper.delayedJump('/pages/purchase/index', 'switchTab')
			},
			// 提示消息
			showMessage() {
				let flag = true
				for (let i = 0; i < this.rules.length; i++) {
					if (!this[this.rules[i].field] || this[this.rules[i].field].length == 0) {
						flag = false
						this.$u.toast(this.rules[i].message)
						break
					}
				}
				return flag
			}
		}
	}
</script>

<style>
</style>
